<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名的操作</title>
		<!-- 样式类名操作：针对css3、添加、移除、切换的元素“类名”操作
		     addClass()           有参：1个参和多个参
			                              语法：addClass（“类名”）
										  <p class=“类名”>
										  语法：addClass（“类名1 类名2”）
										  <p class="类名1  类名2">
										  功能：匹配元素集合中的所有元素
										              添加一个或者多个类名操作
											理解：元素添加存在样式
			 removeClass()     功能：匹配元素集合中的所有元素
			                                       移除一个或者多个类名操作
										 
			 toggleClass()       功能：如果元素有类名移除，没有则添加：
			 hasClass()             功能：检查匹配元素集合中是否包含指定类名
			                                           返回值bool
		 -->
		 <!-- 要求：1.jq引入
		           2.html：div   id="targetElement"
				           四个按钮   id="addClassBtn"
						             id="removeClassBtn"
									 id="toggleClassBtn"
									 id="hasClassBtn"
					       div   id="resultArea"
				   3.css：   .bgColor{   300*300   背景色随意}
				             .broders{ 10个像素实现红色边框  倒角画圆}
		  -->
		  <script src="../js/jquery-1.11.1.js"></script>
		  <style>
			  .bgColor{
				  width: 300px;
				  height: 300px;
				  background: #ff0;
			  }
			  .broders{
				  border: 10px solid #f00;
				  border-radius: 50%;
			  }
			  .bgColor1{
				   background: url(../img/跳舞.gif);
				     border-radius: 50%;
			  }
		  </style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button  id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		<script>
			//1.点击    添加类名   按钮   添加效果【样式】  300*300    背景色红色
			$("#addClassBtn").click(function(){
				//div添加样式---存在样式：类名
				$("#targetElement").addClass("bgColor broders");
				$("#resultArea").html("<h4>添加样式类名：bgColor</h4>");
			});
			//2.  点击  添加类名   按钮   添加效果【样式】
			//300*300   背景色红色    圆   外层   10px    黄色框
			//3.点击   移除类名   按钮   添加效果【样式】  300*300   背景色红色
				$("#removeClassBtn").click(function(){
							//div移除样式---存在样式：类名
							$("#targetElement").removeClass("broders");
							$("#resultArea").html("<h4>移除样式类名：brodersr</h4>");
						});
						//	 点击  切换类名   按钮   添加效果【样式】
			//300*300   背景色红色    圆   外层   10px    黄色框
				$("#toggleClassBtn").click(function(){
							//div添加样式---存在样式：类名
							$("#targetElement").toggleClass("bgColor1");
							$("#resultArea").html("<h4>切换样式类名：bgColor1</h4>");
						});
					//检查类名是否存在   true存在     false不存在
						$("#hasClassBtn").click(function(){
									//div添加样式---存在样式：类名
									var hc=$("#targetElement").addClass("broders");
									$("#resultArea").html("检查当前样式是否存在："+hc);
								});

		</script>
	</body>
</html>